<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>

<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<html>
<head>
    <title>Title</title>
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="js/jquery-1.8.3.js"></script>

</head>
<body>
    <form class="layui-form" lay-filter="Form" id="bannerForm" style="display: none"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

        <input type="hidden" name="id"  placeholder="请输入" autocomplete="off" class="layui-input">

        <div class="layui-form-item">
            <label class="layui-form-label">下拉选择框</label>
            <div class="layui-input-inline">
                <select name="state" lay-filter="state">
                    <option value="0">正常显示</option>
                    <option value="1">正常不显示</option>
                    <option value="2">删除状态</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">请填写描述</label>
            <div class="layui-input-inline">
                <input name="description"  placeholder="请输入" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <button type="button" class="layui-btn" id="test1">
            <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <%-- 图片保存地址 --%>
        <input type="hidden" name="url" id="url"  placeholder="请输入" autocomplete="off" class="layui-input">

        <div class="layui-form-item layui-form-text">
            <div class="layui-input-inline">
                <input name="name" id="name" readonly placeholder="上传文件后显示文件名" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <%--日期选择器  --%>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">上传日期:</label>
            <div class="layui-input-inline"> <!-- 注意：这一层元素并不是必须的 -->
                <input type="text" class="layui-input" name="date" id="date" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="sub">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>

        <table id="banner" lay-filter="ban"></table>
        <%---------- 表格头按钮---------  --%>
        <script type="text/html" id="head">
            <a class="layui-btn layui-btn-lg" lay-event="insert">添加</a>
        </script>
        <%---------- 表格体按钮---------  --%>
        <script type="text/html" id="body">
            <a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
            <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
        </script>
        <%---------- 表格状态显示---------  --%>
        <script type="text/html" id="sta">
            {{#   if(d.state == 0){   }}
                    正常显示
            {{#   }else if(d.state == 1){  }}
                    正常不显示
            {{#   }else if(d.state == 2){    }}
                    被删除
            {{#   }       }}
        </script>
        <%---------- 表格图片展示---------  --%>
        <script type="text/html" id="pic">
             <img src="{{d.url}}" />
        </script>

        <script>
            layui.use(['table','form','upload','laydate'],function () {
                var table = layui.table;
                var form = layui.form;
                var upload = layui.upload;
                var laydate = layui.laydate;
                //执行实例
                var uploadInst = upload.render({
                    elem: '#test1' //绑定元素
                    ,url: 'banner/upload' //上传接口
                    ,done: function(res){
                        //上传完毕回调
                        $("#name").val(res.oldName);
                        $("#url").val(res.newName);
                    }
                    ,error: function(){
                        //请求异常回调
                    }
                });
                //执行一个laydate实例  日期选择器
                laydate.render({
                    elem: '#date' //指定元素
                });

                table.render({
                    elem:"#banner",
                    page:true,
                    limit:3,
                    limits:[3,5,7],
                    url:"banner/selectPageBanner",
                    toolbar:"#head",
                    cols:[[
                        {title:"编号",field:"id"},
                        {title:"图片",templet:"#pic"},
                        {title:"图片名称",field:"name"},
                        {title:"状态",templet:"#sta"},
                        {title:"上传日期",field:"date"},
                        {title:"描述",field:"description"},
                        {title:"操作栏",toolbar:"#body"},
                    ]]
                })
            // -------------删除和修改------------------------
                table.on('tool(ban)',function (obj) {
                    console.log("删除弹出框触发了");
                    if(obj.event=='delete'){
                        layer.confirm('删除?',function (index) {
                            $.ajax({
                                url:"banner/updateStatus",
                                data:"id="+obj.data.id+"&state="+obj.data.state,
                                dataType:"json",
                                success:function (result) {
                                    if(result.isDelete){
                                        layer.close(index);
                                        layer.msg('删除成功');
                                        table.reload('ban',{
                                            page:{
                                                curr:1
                                            }
                                        });
                                    }
                                }
                            })
                        })
                    }else if(obj.event == 'update'){
                        console.log("修改弹出框触发了");
                        $.ajax({
                            url:"banner/selectOneBanner",
                            data:"id="+obj.data.id,
                            dataType:"json",
                            success:function (result) {
                                form.val('Form',{
                                    id:result.id,
                                    name:result.name,
                                    url:result.url,
                                    state:result.state,
                                    data:result.data,
                                    description:result.description
                                })
                            }
                        })
                        layer.open({
                            content:$("#bannerForm"),
                            title:"修改",
                            type:1,
                            area:['400px','400px']
                        })
                        form.render();
                        form.on('submit(sub)',function () {
                            console.log("修改事件触发了");
                            $.ajax({
                                url:"banner/updateBanner",
                                data:$("#bannerForm").serialize(),
                                dataType:"json",
                                success:function (result) {
                                    console.log("函数回调执行了");
                                    if(result.isUpdate){
                                        layer.closeAll();
                                        table.reload('ban');
                                        layer.msg('修改成功');
                                    }
                                }
                            })
                            return false;
                        })
                    }
                })
            // ----------添加----------------------
            table.on('toolbar(ban)',function (obj) {
                console.log("弹出框触发了");
                //清空输入框
                $("#bannerForm")[0].reset();
                if(obj.event == 'insert'){
                    layer.open({
                        content:$("#bannerForm"),
                        title:"添加",
                        type:1,
                        area:['400px','400px']
                    })
                    form.render();
                }
                form.on('submit(sub)',function () {
                    console.log("添加事件触发了");
                    $.ajax({
                        url:"banner/insertBanner",
                        data:$("#bannerForm").serialize(),
                        dataType:"json",
                        success:function (result) {
                            if(result.isAdd){
                                layer.closeAll();
                                table.reload('ban');
                                layer.msg('添加成功');
                            }
                        }
                    })
                    return false;
                })
            })

        })
        </script>
</body>
</html>

